<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background: pink;
			}
			canvas{
				background: yellow;
			}
			span{
				color: #000;
			}
		</style>
		<script>
			window.onload = function(){
				var oC2 = document.querySelector("#c2");
				var oG2 = oC2.getContext('2d');
				oG2.fillStyle = 'purple';
				oG2.fillRect(0,0,100,100);
				var num = 0
				var timer = null;
				timer = setInterval(function(){
					num++;
					oG2.clearRect(0,0,oC2.width,oC2.height);
					if( num == oC2.width - 100  ){
						clearInterval(timer);
						oG2.fillRect(oC2.width - 100,oC2.height - 100,100,100);
					}else{
						oG2.fillRect(num,num,100,100);
					}
					
				},10)
			};
		</script>
	</head>
	<body>
		<canvas width="400" height="400" id="c2">
			<span>您的浏览器不支持canvas</span>
		</canvas>
	</body>
</html>
